import React, { Component } from 'react';
import { Form, Row, Col, Button, message } from 'antd';
import ShowType from '../../../routes/common/showType';
import styles from '../../../index.less';
import * as config from '../../../utils/config';

const FormItem = Form.Item;

class TabMainTableComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sTabId: props.app.currentPane.key, /* 当前标签 */
      componentName: props.componentName, /* 组件名 */
      masterConfig: props.masterConfig, /* 配置 */
      sId: props.sId, /* 业务数据Id */
      dataList: [], /* 数据 */
      sActiveId: props.sActiveId, /* 窗体Id */
      disabled: props.disabled, /* 是否是查看状态 */
      sUserNo: '', /* 用户号 */
      sUserName: '', /* 用户名 */
      sEmployeeId: '', /* 员工名 */
      sDepartment: '', /* 部门 */
      sType: '', /* 角色 */
      sLanguage: '', /* 语言 */
      restButton: props.userinfo.sType === 'sysadmin', /* 重置按钮 */
      userId: props.userinfo.sId, /* 用记ID */
    };
  }

  componentWillMount() {
    /* 获取主表数据 */
    const {
      masterConfig, sActiveId, sId, componentName, sTabId,
    } = this.state;
    const { dispatch } = this.props;
    if (sId !== undefined && sId !== '') {
      const mainId = masterConfig.sId;
      /* 表Id */
      const value = { sId, pageSize: '', pageNum: '' };
      /* 业务数据Id */
      const dataUrl = `${config.server_host}business/getBusinessDataByFormcustomId/${mainId}?sModelsId=${sActiveId}`;
      dispatch({
        type: 'content/getUrlPostData',
        payload: {
          url: dataUrl, sTabId, componentName, value, formRoute: '/sftlogininfo', returnType: 'data',
        },
      });
      /* 获取主表数据 */
    }
    if (masterConfig.gdsconfigformslave !== undefined) {
      const mainConfig = masterConfig.gdsconfigformslave;
      this.setState({
        sId: sId !== undefined ? sId : '',
        sUserNo: mainConfig.filter(item => (item.sName.toLowerCase() === 'suserno'))[0],
        sUserName: mainConfig.filter(item => (item.sName.toLowerCase() === 'susername'))[0],
        sEmployeeId: mainConfig.filter(item => (item.sName.toLowerCase() === 'semployeeid'))[0],
        sDepartment: mainConfig.filter(item => (item.sName.toLowerCase() === 'sdepartment'))[0],
        sType: mainConfig.filter(item => (item.sName.toLowerCase() === 'stype'))[0],
        sLanguage: mainConfig.filter(item => (item.sName.toLowerCase() === 'slanguage'))[0],
      });
    }
  }

  componentWillReceiveProps(nextProps) {
    const {
      sId, disabled, content, dataSet,
    } = nextProps;
    const { dataList } = content;
    const {
      sDataListTabId, returnType, urlData, loading, componentName,
    } = dataList;
    this.setState({ disabled, dataList: dataSet });
    if (this.state.sTabId === sDataListTabId && this.state.sTabId === nextProps.app.currentPane.key
      && this.state.componentName === componentName) {
      if (loading) return;
      if (returnType === 'data') {
        this.setState({
          dataList: urlData,
          sId: sId !== undefined ? sId : '',
        });
      }
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    const { componentName } = nextProps;
    const { sId } = this.props;
    if (sId === undefined) {
      return true;
    }
    let flag = true;
    if (nextState.disabled !== this.state.disabled) {
      return true;
    }
    if (this.state.sTabId === nextProps.app.currentPane.key &&
      this.state.componentName === componentName) {
      flag = true;
    } else {
      flag = false;
    }
    return flag;
  }

  handleResetPwd = () => {
    const { userId } = this.state;
    const url = `${config.server_host}gdslogininfo/resetPwd/${userId}`;
    const { token } = this.props.app;
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        authorization: token,
      },
    };
    fetch(url, options).then(response => response.json()).then((json) => {
      if (json.code === 1) {
        message.success(json.msg);
      } else {
        message.error(json.msg);
      }
    });
  };

  render() {
    const {
      app, form, handleModalPane, dataName, dataType, handleSelectChange, onClose,
    } = this.props;
    const {
      dataList, sId, sActiveId, disabled, restButton,
    } = this.state;
    const childProps = {
      app,
      form,
      sActiveId,
      dataList,
      sId,
      disabled,
      handleModalPane,
      handleSelectChange,
      dataName,
      dataType,
      onClose,
    };
    const {
      sUserNo, sUserName, sEmployeeId, sDepartment, sType, sLanguage,
    } = this.state;
    const sUserNoProps = { showConfig: sUserNo, ...childProps, disabled: sId !== '' };
    const sUserNameProps = { showConfig: sUserName, ...childProps };
    const sEmployeeIdProps = { showConfig: sEmployeeId, ...childProps };
    const sDepartmentProps = { showConfig: sDepartment, ...childProps };
    const sTypeProps = { showConfig: sType, ...childProps };
    const sLanguageProps = { showConfig: sLanguage, ...childProps };
    return (
      <FormItem className={styles.searchMainForm}>
        <Row>
          <Col
            span={6}
            order={sUserNo.iOrder > 24 ? 24 : sUserNo.iOrder}
            style={{ display: sUserNo.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sUserNo" showDefaultName="用户号" {...sUserNoProps} />
          </Col>
          <Col
            span={6}
            order={sUserName.iOrder > 24 ? 24 : sUserName.iOrder}
            style={{ display: sUserName.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sUserName" showDefaultName="用户名" {...sUserNameProps} />
          </Col>
          <Col
            span={6}
            order={sEmployeeId.iOrder > 24 ? 24 : sEmployeeId.iOrder}
            style={{ display: sEmployeeId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sEmployeeId" showDefaultName="员工名" {...sEmployeeIdProps} />
          </Col>
          <Col
            span={6}
            order={sDepartment.iOrder > 24 ? 24 : sDepartment.iOrder}
            style={{ display: sDepartment.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sDepartment" showDefaultName="部门" {...sDepartmentProps} />
          </Col>
          <Col
            span={6}
            order={sType.iOrder > 24 ? 24 : sType.iOrder}
            style={{ display: sType.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sType" showDefaultName="类型" {...sTypeProps} />
          </Col>
          <Col
            span={6}
            order={sLanguage.iOrder > 24 ? 24 : sLanguage.iOrder}
            style={{ display: sLanguage.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sLanguage" showDefaultName="语言" {...sLanguageProps} />
          </Col>
          <Col
            span={6}
            style={{ display: restButton ? 'block' : 'none' }}
          >
            <Button onClick={this.handleResetPwd}>重置密码</Button>
          </Col>
        </Row>
      </FormItem>
    );
  }
}

export default TabMainTableComponent;
